<script setup lang="ts">
import { computed, watch, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Location, Iphone, CopyDocument } from '@element-plus/icons-vue'

export interface AddressItem {
  id: string
  name: string
  fullAddress: string
  phone: string
  isDefault: string
  province?: string
  city?: string
  district?: string
  detail?: string
  // 供编辑弹窗回填用的可选字段（均为code）
  provinceCode?: string
  cityCode?: string
  districtCode?: string
}
//地址卡片
const props = defineProps<{ address: AddressItem }>()
const emits = defineEmits<{
  (e: 'set-default', id: string): void
  (e: 'edit', item: AddressItem): void
  (e: 'delete', id: string): void
}>()
//默认地址
const localDefault = ref<string>(props.address.isDefault)
watch(
  () => props.address.isDefault,
  v => (localDefault.value = v)
)
//手机号脱敏
const maskedPhone = computed(() => {
  const p = props.address.phone || ''
  return p.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
})
//设为默认地址
const onSetDefault = () => {
  if (props.address.isDefault === '0') {
    // 触发设为默认地址事件
    emits('set-default', props.address.id)
  }
}

//设为默认地址
const onTopRightSetDefault = () => {
  if (props.address.isDefault === '1') {
    return
  }
  onSetDefault()
}
//复制地址
const copyAddress = async () => {
  const text = `${props.address.name}，${props.address.phone}，${props.address.province || ''}${props.address.city || ''}${props.address.district || ''}${props.address.detail || ''}`
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('地址已复制到剪贴板')
  } catch (e) {
    // 兼容降级
    const textarea = document.createElement('textarea')
    textarea.value = text
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    ElMessage.success('地址已复制到剪贴板')
  }
}
</script>

<template>
  <div class="address-card" :class="{ 'is-default': address.isDefault === '1' }">
    <div class="airmail-border"></div>
    <div class="badge" v-if="address.isDefault === '1'">
      默认地址
    </div>
    <button
      v-else-if="address.isDefault === '0'"
      class="set-default-btn"
      type="button"
      @click="onTopRightSetDefault"
    >设为默认</button>

    <div class="row name-row">
      <el-icon class="icon"><User /></el-icon>
      <span class="name">{{ address.name }}</span>
      <span class="province">{{ address.province }}</span>
      <el-button class="copy-btn" text size="small" @click="copyAddress">
        <el-icon><CopyDocument /></el-icon>
        复制
      </el-button>
    </div>

    <div class="row addr-row">
      <el-icon class="icon"><Location /></el-icon>
      <div class="addr-text">
        <span class="province-text">{{ address.province }}</span>
        <span class="city-text">{{ address.city }}</span>
        <span class="district-text">{{ address.district }}</span>
        <span class="detail-text">{{ address.detail }}</span>
      </div>
    </div>

    <div class="row phone-row">
      <el-icon class="icon"><Iphone /></el-icon>
      <span class="phone">{{ maskedPhone }}</span>
    </div>

    <div class="actions">
      <div></div>
      <div class="right-actions">
        <el-button size="small" @click="$emit('edit', address)">修改</el-button>
        <el-button size="small" type="danger" text @click="$emit('delete', address.id)">删除</el-button>
      </div>
    </div>

  </div>
</template>


<style scoped lang="scss">
.address-card {
  position: relative;
  width: 100%; /* 由父级网格控制宽度，实现自适应列数 */
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 12px 16px 40px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  .airmail-border {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 0.625rem;
    background: repeating-linear-gradient(45deg, #ff6a00 0 0.625rem, #fff 0.625rem 1.25rem, #4aa3ff 1.25rem 1.875rem, #fff 1.875rem 2.5rem);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  &:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); transform: translateY(-1px); }

  &.is-default { border-color: #ff6a00; }

  .badge {
    position: absolute;
    top: 0.375rem; left: 0.75rem;
    background: #ff6a00; /* 橙色 */
    color: #fff;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    padding: 0.125rem 0.625rem;
  }
  .set-default-btn {
    position: absolute;
    top: 0.25rem; left: 0.75rem; /* 与默认地址相同位置 */
    background: #409eff; /* 蓝色 */
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    cursor: pointer;
  }

  .row { display: flex; align-items: center; margin-top: 0.875rem; }
  .icon { color: #999; margin-right: 0.5rem; }
  .name { font-weight: 600; color: #333; font-size: 1rem; }
  .province { font-weight: 600; color: #333; margin-left: 0.5rem; }
  .name-row { justify-content: space-between; }
  .copy-btn { margin-left: auto; }
  .addr-row { align-items: flex-start; }
  .addr-text { 
    color: #333; 
    line-height: 1.25rem; 
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .province-text, .city-text, .district-text, .detail-text {
    color: #333;
  }
  .cod-tip { color: #999; margin-left: 0.5rem; white-space: nowrap; }
  .phone { color: #333; }

  .actions {
    position: absolute;
    left: 1rem; bottom: 0.625rem; right: 1rem;
    display: flex; justify-content: space-between; align-items: center;
  }

 
}
</style>


